import React from 'react'

import classNames from 'classnames'

function TodoFoot({datalist,changeType,type}){
    const btns = [{
        type:'all',
        text:'全部'
    },{
        type:'done',
        text:'完成'
    },{
        type:'undone',
        text:'未完成'
    }]
    return (
        <div className='row'>
            <div className='col-4'>
                总数：{datalist.length}
            </div>
            <div className='col-8'>
                {
                    btns.map(item=>{
                        return <button 
                            key={item.type}
                            className={classNames(
                                'btn btn-sm me-3',
                                item.type === type ? 'btn-primary' : 'btn-outline-primary'
                            )}
                            onClick={()=>{
                                changeType(item.type)
                            }
                            }
                        >{item.text}</button>
                    })
                }
            </div>
        </div>
    )
}

export default TodoFoot;